<template>
    <div class="app-container">
        <vxe-tabs v-model="tabVal" height="100%" :options="tabList">
            <template v-for="item in tabList" #[item.slots.default]>
                <components v-if="item.name == tabVal" :is="item.slots.default" class="p-5 h-full"></components>
            </template>
        </vxe-tabs>
    </div>
</template>

<script>
import RemoteTable from './components/RemoteTable.vue';
import DefaultQuery from './components/DefaultQuery.vue';
import LeftButtons from './components/LeftButtons.vue';
import RightTools from './components/RightTools.vue';
import RadioPl from './components/RadioPl.vue';
import LayoutSlots from './components/LayoutSlots.vue';
import CellSlots from './components/CellSlots.vue';
import CheckBoxPl from './components/CheckBoxPl.vue';

export default {
    components: { RemoteTable, DefaultQuery, LeftButtons, RightTools, RadioPl, LayoutSlots, CellSlots, CheckBoxPl },
    data() {
        return {
            tabVal: '5',
            tabList: [
                { name: '5', title: '单选', slots: { default: 'RadioPl' } },
                { name: '6', title: '多选', slots: { default: 'CheckBoxPl' } },
                { name: '8', title: '布局插槽', slots: { default: 'LayoutSlots' } },
                { name: '9', title: '单元格插槽', slots: { default: 'CellSlots' } },
                { name: '1', title: '导入导出', slots: { default: 'RemoteTable' } },
                { name: '2', title: '默认查询参数', slots: { default: 'DefaultQuery' } },
                { name: '3', title: '左侧按钮组', slots: { default: 'LeftButtons' } },
                { name: '4', title: '右侧工具栏', slots: { default: 'RightTools' } },
            ],
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>